<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>7无缝滚动</title>
		<script type="text/javascript">
			(function() {
				var html = document.documentElement;
				var hwidth = html.getBoundingClientRect().width;
				html.style.fontSize = hwidth / 15 + "px";
			}())
			/* 获取html */
			//	var html = document.documentElement;
			/* 设置html的字体大小 =可视区的宽度/15 */
			//	html.style.fontSize = html.ClientWidth / 15 + "px";
			/* 阻止浏览器的默认行为 */
			/* 测试报错 */
			/* document.addEventListener('touchstart', function(ev) {
				ev.preventDefault();
			}); */
		</script>
		<style>
			body {
				margin: 0;
			}

			.wrap {
				width: 15rem;
				height: 6.33rem;
				position: relative;
				overflow: hidden;
			}

			.list {
				padding: 0;
				margin: 0;
				/* width: 400%; *//* js（w*list.children.lenth+px） */
				position: absolute;
				top: 0;
				left: 0;
				list-style: none;
			}

			.list li {
				float: left;
				width: 15rem;
			}

			.list img {
				width: 15rem;
				display: block;
			}

			nav {
				width: 15rem;
				height: 10px;
				position: absolute;
				bottom: 10px;
				z-index: 4;
				text-align: center;
			}

			 nav a {
				width: 10px;
				height: 10px;
				display: inline-block;
				background: red;
				border-radius: 50%;
				vertical-align:top;
			}

			nav a.active {
				background: #fff;
			}
		</style>
	</head>
	<body>
		<section class="wrap">
			<ul class="list">
				<li>
					<img src="img/img1.jpg" alt="" />
				</li>
				<li>
					<img src="img/img2.jpg" alt="" />
				</li>
				<li>
					<img src="img/img3.jpg" alt="" />
				</li>
				<li>
					<img src="img/img4.jpg" alt="" />
				</li>
			</ul>
			<nav>
				<a href="javascript:;" class="active"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</nav>
		</section>
		<script type="text/javascript">
			var wrap = document.querySelector(".wrap"),
				list = document.querySelector(".list"),
				a = document.querySelectorAll("a"),
				/* 按下元素的坐标值 */
				disX = 0,
				/* 按下元素的坐标值 */
				listL = 0,
				w = wrap.clientWidth; /* 一张图宽度(元素的宽度) */
			n = 0;
			list.innerHTML += list.innerHTML;
			var len = list.children.length;
			list.style.width = w * len + 'px';
			list.addEventListener('touchstart', satrt);
			list.addEventListener('touchmove', move);
			list.addEventListener('touchend', end);
			/* document.addEventListener('touchend', end); */

			function satrt(ev) {
				var num = Math.round(list.offsetLeft / w);
				console.log(num + "--" + ((-len) + 1))
				/* 在按下的时候，要知道当前点击的是第几张图片,如果是第一张快速拉到第5张的位置上 */
				if (num == 0) {
					num = a.length;
					list.style.transition = 'none';
					list.style.left = (-num) * w + "px"
					console.log("第0个切换到" + (-num))
				}

				if (num == ((-len) + 1)) {
					num = a.length - 1;
					list.style.transition = 'none';
					list.style.left = (-num) * w + "px"
					console.log(" 第-7个切换到" + (-num))
				}
				var e = ev.changedTouches[0];
				disX = e.pageX;
				listL = this.offsetLeft; /* 整体向左的值 */
				list.style.transition = 'none';
				
				console.log("-------satrt------")
			}

			function move(ev) {
				var e = ev.changedTouches[0];
				list.style.left = (e.pageX - disX) + listL + "px";
				var num = Math.round(list.offsetLeft / w);
				a[n].className = '';
				a[-num % a.length].className = ' active';
				n = -num % a.length;
				console.log("-------move------")
			}

			function end(ev) {
				/* 一半？ 取整*/
				var num = Math.round(list.offsetLeft / w);
				/* 0*375/ -1*375/ -2*375/ -3*372*/
				list.style.left = num * w + 'px';
				list.style.transition = '0.5s';

				console.log(num + "-------end------")


			}
		</script>

	</body>
</html>
